<template>
  <div class="z-desc">
    <template v-for="item in list">
      <div
        v-if="typeof item.hidden === 'function' ? !item.hidden(item.value, item) : !item.hidden"
        class="z-desc-item"
        :style="{
          '--z-width': item.itemWidth || itemWidth,
          '--z-label-width': item.labelWidth || labelWidth
        }"
      >
        <div class="z-desc__label" :style="` textAlign:${item.labelAlign || labelAlign}`">
          {{ $t(item.name) }}：
        </div>
        <div class="z-desc__text">
          <component v-if="item.render" :is="item.render(item.value, item)" />
          <span v-else>{{ item.value }}{{ item.unit }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

const props = withDefaults(defineProps<import('./type').Props>(), {
  itemWidth: '50%',
  labelWidth: '80px'
})

const { t } = useI18n()
const $t = (text: string = '') => {
  return props.i18n && text ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text) : text
}
</script>

<style lang="scss">
@use './style.scss';
</style>
